<template>
	<view class="container">
		<!--切换-->
		<view class="flex-row tabs">
			<view @click="toggleTab(0)" class="tab" :class="{active: tabIndex == 0}">
				<text>分级巡检看板</text>
				<view class="tip">1</view>
			</view>
			<view @click="toggleTab(1)" class="tab" :class="{active: tabIndex == 1}">
				<text>隐患治理看板</text>
				<view class="tip">2</view>
			</view>
		</view>
		<!--列表-->
		<scroll-view v-if="list.length" @scrolltolower="getNextPageData" scroll-y="true" class="scroll">
			<!--总经办-->
			<view v-show="tabIndex == 0" class="card top">
				<view class="title flex-row">
					<view class="name">总经办</view>
					<view>完成率：<text class="error">0.0%</text></view>
				</view>
				<view class="item">
					<view>
						<view>当月任务数：<text class="success">85</text></view>
						<view>当月巡检数：<text class="success">0</text></view>
					</view>
					<view>
						<view>当期任务数：<text class="error">4</text></view>
						<view>当期未巡检数：<text class="error">81</text></view>
					</view>
					<view>截至时间：2020-02-28 10:41:32</view>
				</view>
			</view>
			<view v-show="tabIndex == 1" class="card top danger">
				<view class="title flex-row">
					<view class="name">总经办</view>
					<view>整改率：<text class="success">0.0%</text></view>
				</view>
				<view class="item">
					<view>
						<view>当月隐患数：<text class="success">0</text></view>
						<view>整改或已验收：<text class="success">0</text></view>
					</view>
					<view>
						<view>整改期内任务：<text class="error">4</text></view>
						<view>逾期未整改数：<text class="error">81</text></view>
					</view>
				</view>
			</view>
			<!--下级列表-->
			<view v-show="tabIndex == 0" v-for="item in list" :key="item" class="card">
				<view class="title flex-row">
					<view class="name">总经办</view>
					<view>完成率：<text class="error">100%</text></view>
				</view>
				<view class="item">
					<view>
						<view>当月任务数：<text class="success">85</text></view>
						<view>当月巡检数：<text class="success">0</text></view>
					</view>
					<view>
						<view>当期任务数：<text class="error">4</text></view>
						<view>当期未巡检数：<text class="error">81</text></view>
					</view>
					<view>截至时间：2020-02-28 10:41:32</view>
					<view>
						<view>请及时巡检，安全生产！</view>
						<view><view class="btn">催办</view></view>
					</view>
				</view>
			</view>
			<view v-show="tabIndex == 1" class="card" style="height: 164upx;">
				<view class="title flex-row">
					<view class="name">总经办</view>
					<view>整改率：<text class="success">100%</text></view>
				</view>
				<view class="item">
					<view>
						<view>当月隐患数：<text class="success">0</text></view>
						<view>整改或已验收：<text class="success">0</text></view>
					</view>
					<view>
						<view>整改期内任务：<text class="error">4</text></view>
						<view>逾期未整改数：<text class="error">81</text></view>
					</view>
					<view>
						<view>请及时巡检，安全生产！</view>
						<view><view class="btn">催办</view></view>
					</view>
				</view>
			</view>
			<view class="nodata">没有更多了~</view>
		</scroll-view>
		<view v-else class="nodata">没有更多了~</view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			tabIndex: 0,
			list: [1,2,3,4,5,6,7,8,9,10]
		}
	},
	methods: {
		// 切换tab
		toggleTab(index){
			this.tabIndex = index;
		},
		// 获取下一页
		getNextPageData(){
			console.log('到达底部');
		},
	}
}
</script>

<style scoped>
.container{
	height: 100%;
}

/*状态*/
.error{
	color: red;
}
.success{
	color: #389E0D;
}

/*列表*/
.scroll{
	height: calc(100% - 80upx);
	overflow-y: auto;
}

/*卡片*/
.card{
	height: 210upx;
	background: #fff;
	margin-bottom: 16upx;
	border-radius: 16upx;
	margin: 20upx 20upx 0;
	padding: 14upx 20upx 20upx;
	box-shadow: 0 2upx 4upx #DEDEDE;
}
.card.top{
	margin: 0;
	height: 160upx;
	border-radius: 0;
	box-shadow: 0 2upx 2upx #F2F2F2;
}
.card.top.danger{
	height: 124upx;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 16upx;
	font-weight: bold;
	position: relative;
}
.card .title view:first-child{
	width: 55%;
}
.card .title view:last-child{
	width: 45%;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #F27C00;
	border-radius: 6upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item view{
	height: 42upx;
	line-height: 1.4;
	position: relative;
}
.card .item view view:first-child{
	width: 55%;
	float: left;
}
.card .item view view:last-child{
	width: 45%;
	float: left;
}
.card .item .btn{
	padding: 0;
	color: #fff;
	width: 40px !important;
	height: 20px;
	font-size: 13px;
	line-height: 20px;
	border-radius: 3px;
	text-align: center;
	background-color: #F98202;
	position: absolute;
	top: 0;
	right: 0;
}

/*tab切换*/
.tabs{
	height: 80upx;
	background: #fff;
	justify-content: space-around;
}
.tabs .tab{
	position: relative;
}
.tabs .tab.active{
	color: #157FC2;
	position: relative;
}
.tabs .tab.active::after{
	content: '';
	width: 120%;
	height: 6upx;
	background: #157FC2;
	position: absolute;
	bottom: -10upx;
	left: -10%;
}
.tabs .tab view{
	width: 30upx;
	height: 30upx;
	color: #fff;
	font-size: 20upx;
	text-align: center;
	line-height: 30upx;
	border-radius: 50%;
	background: #FF6E03;
	position: absolute;
	top: -4upx;
	right: -20upx;
}
</style>
